<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        #tab1 .aui-active {
            color: #f23030;
            border-bottom: 2px solid #f23030;
        }

        .aui-list-item-middle {
            padding-left: 0.75rem;
        }

        .aui-radio:checked {
            background-color: #f23030;
            border: solid 1px #f23030;
        }

        .aui-toast {
            width: 9.5rem;
            background: #999;
            opacity: 0.7;
            height: 4rem;
            min-height: 4rem;
            line-height: 4rem;
        }

        .aui-toast-content {
            color: #fff;
        }
        /*多选框*/

        label {
            /*width: 100vw;*/
            display: flex;
            align-items: center;
        }

        .check_btn {
            margin-right: 0.75rem;
            width: 0.75rem;
            height: 0.75rem;
            display: none;
        }

        .all_check_btn {
            margin-right: 0.75rem;
            width: 0.75rem;
            height: 0.75rem;
            margin-left: 0.75rem;
            display: block;
        }

        .check_btn:checked,
        .all_check_btn:checked {
            background-color: #ff0036;
            border: 1px solid #ff0036;
        }

        .check_btn:checked::after,
        .check_btn:checked::before,
        .all_check_btn::after,
        .all_check_btn:before {
            width: 0.4rem;
            height: 0.2rem;
            margin-left: -0.25rem;
            margin-top: -0.15rem;
        }

        .all_checked_box {
            display: none;
        }

        .all_checked_box .box {
            background-color: #fff;
            position: fixed;
            bottom: 0;
            display: flex;
            align-items: center;
            width: 100vw;
            height: 2.5rem;
            line-height: 2.5rem;
            justify-content: space-between;
        }

        .all_checked_box .lower_goods {
            padding: 0 0.75rem;
            color: #ff0036;
        }
    </style>
</head>

<body>
    <div id="app" style="box-sizing:border-box">
        <div id="tab1-con">
            <div id="tab1-con1">
                <ul class="aui-list aui-media-list" id="tab1_ul">
                    <li v-for="(list_data,index) in share_commdotiy_data" class="aui-list-item aui-list-item-middle">
                        <label @click="chose_shop(index,$event)">
                        <input class="aui-radio check_btn" type="checkbox" name="checkbox" :value="list_data.goods_id">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" style="width:3.5rem; padding-right:0;margin-right:0.75rem">
                                <!-- <img :src="list_data.logo_pic" class="aui-list-img-sm"> -->
                                <div :style="'background:url('+list_data.logo_pic+') center/cover no-repeat;width:3.5rem;height:3.5rem;'"></div>
                            </div>
                            <div class="aui-list-item-inner">
                                {{list_data.goods_title}}
                            </div>
                        </div>
                      </label>
                    </li>
                </ul>

                <div class="upload_shop_btn" style="position:fixed;bottom:0;width:100vw;height:2.5rem;line-height:2.5rem;background:#f23030;text-align:center;color:#fff;" onclick="uploadCommodity()">上传商品</div>
                <div class="all_checked_box">
                    <div class="box">
                        <label style="width:40vw;" @click="chose_all_shop($event)">
                          <input class="aui-radio all_check_btn" type="checkbox" name="checkbox">
                          全选
                        </label>
                        <div style="" class="lower_goods" @click="lower_goods($event)">下架</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.js"></script> -->
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
function uploadCommodity() {
    api.openWin({
        name: 'uploadCommodity',
        url: './headerone.html',
        pageParam: {
            msg: '商品上传',
            url: './uploadCommodity.html'
        }
    });

}
    apiready = function() {

        api.addEventListener({
            name: 'edit_shops'
        }, function(ret, err) {
            if (ret) {
                if (ret.value.name == "编辑商品") {
                    edit_shops();
                } else {
                    cancel_edit_shops();
                }
            } else {
                alert(JSON.stringify(err));
            }
        });


        // 实例化vue  渲染分享商品列表数据
        var share_commdotiy = new Vue({
            el: '#app',
            data: {
                share_commdotiy_data: [],
                share_shop_sum: 0,
                goods_id: [],
                store_id:0
            },
            created: function() {
                var $_this = this;
                $_this.get_share_commdotiy();
            },
            methods: {
                // 获取分享商品的接口
                get_share_commdotiy: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freestore_getStoreGoods,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                type: 1,
                                page: 1
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("获取到的所有分享的商品---" + JSON.stringify(ret));
                            if (ret.re == 1) {
                                $_this.share_commdotiy_data = ret.data.list;
                                $_this.share_shop_sum = ret.data.list.length;
                                $_this.store_id = ret.data.list[0].store_id;
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                },
                // 选中当前的商品
                chose_shop: function(index, ev) {
                    var $_this = this;
                    if (ev.target.tagName == 'LABEL' || ev.target.tagName == 'DIV') return;
                    $('.check_btn').eq(index).attr('checked', 'true');
                    var checked_length = $('#tab1_ul').find('input:checked').length;
                    if (checked_length == $_this.share_shop_sum) {
                        $('.all_check_btn').prop('checked', 'true')
                    } else {
                        $('.all_check_btn').removeProp('checked')
                    }
                },
                // 选中所有商品
                chose_all_shop: function(ev) {
                    var $_this = this;
                    if (ev.target.tagName == 'LABEL') return;
                    if ($('.all_check_btn').prop('checked')) {
                        $('.check_btn').prop('checked', 'true')
                    } else {
                        $('.check_btn').removeProp('checked')
                    }

                },

                // 下架选中的商品
                lower_goods: function(ev) {
                    var $_this = this;
                    $_this.goods_id = [];
                    var shop_id_str = "";
                    for (var i = 0; i < $('#tab1_ul .check_btn').length; i++) {

                        if ($('.check_btn').eq(i).prop('checked')) {
                            $_this.goods_id.push($('.check_btn').eq(i).val())
                        }

                        if (i == ($('#tab1_ul .check_btn').length - 1)) {
                            shop_id_str = $_this.goods_id.join("-");
                            console.log(shop_id_str)
                            if(shop_id_str==""){
                              api.toast({
                                  msg: '请选择下架商品',
                                  duration: 2000,
                                  location: 'bottom'
                              });
                            }else{
                              api.ajax({
                                  url: window.Url.Freestore_goodsSale,
                                  method: 'post',
                                  data: {
                                      values: {
                                          token: $api.getStorage('user_data').token,
                                          type: 2,
                                          goods_id: "-"+shop_id_str+"-",
                                          store_id:$_this.store_id
                                      }
                                  }
                              }, function(ret, err) {
                                  if (ret) {
                                      // alert(JSON.stringify(ret));
                                      api.toast({
                                          msg:ret.info,
                                          duration: 2000,
                                          location: 'bottom'
                                      });

                                  } else {
                                      alert(JSON.stringify(err));
                                  }
                              });

                            }

                        }
                    }
                }
            }
        })


    };



    // 添加选择商品的复选框
    function edit_shops() {
        $('.check_btn').removeProp('checked')
        $('.check_btn').css('display', 'block');
        $('.all_checked_box').css('display', 'block');
        $('.upload_shop_btn').css('display', 'none');
    }

    function cancel_edit_shops() {
        $('.check_btn').css('display', 'none');
        $('.all_checked_box').css('display', 'none');
        $('.upload_shop_btn').css('display', 'block');
    }
</script>

</html>
